<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
    </div>

    <script>
        // 组件名 
        // 定义组件名的方式有两种： kebab-case、PascalCase 
        Vue.component('my-component-name', { /* ... */ })
        Vue.component('MyComponentName', { /* ... */ })
        //  使用：<my-component-name> 和 <MyComponentName>，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

        // -----------------------
        // 全局注册，可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
        Vue.component('my-component-name', {
            // ... 选项 ...
        })

        // 局部注册，通过一个普通的 JavaScript 对象来定义组件：
        var ComponentA = { /* ... */ }

        // 在模块系统中局部注册
        import ComponentB from './ComponentB'

        // ------------------------------------
        // 基础组件的自动化全局注册
        // 因为手动全局注册浪费时间，所以用代码来把相同前缀的基础组件来自动注册
        // 具体代码看官网 https://v2.cn.vuejs.org/v2/guide/components-registration.html#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8C%96%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

        var vm = new Vue({
            el: "#app",
            // 局部注册： components 选项中定义你想要使用的组件：
            components: {
                'component-a': ComponentA,
                ComponentB,
            }

        })

    </script>
</body>

</html>